<template>
  <div>
    <div class="dachu-title">
      <p :class="{ active: curType === 1 }" @click="changeId(1)">大触直播</p>
      <p :class="{ active: curType === 2 }" @click="changeId(2)">大触专访</p>
      <p :class="{ active: curType === 3 }" @click="changeId(3)">大触周边</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "DachuActive",
  data() {
    return {
      curType: 1,
      showId: "DachuActiveOne",  // 默认页面
    };
  },
  mounted() {},
  methods: {
    changeId(id) {
      this.curType = id;
      // console.log(this.curType);
      let showId = "";
      switch (id) {
        case 1:
          showId = "DachuActiveOne";
          break;
        case 2:
          showId = "DachuActiveTwo";
          break;
        default:
          showId = "DachuActiveThree";
          break;
      }
      this.$parent.getid(showId);  // 父传子 
    },
  },
};
</script>
<style lang="scss" scoped>
.dachu-title {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: gray;
  font-size: 24px;
}
.active {
  color: blue;
}
//
// .active::after {
//   content:'';
//   width: 8px;
//   height: 2px;
//   background-color: blue;
//   text-align: center;
// }
</style>
